<template>
	<view style="padding-bottom: 5vh;background-color: #ffffff;">
		<view style="width: 100%;">
			<view class="search-w">
				<view class="announcement">
					<uni-search-bar radius="100" v-model="announcementData.searchValue" placeholder="请输入搜索内容"
						clearButton="none" cancelButton="none" @confirm="search" />
				</view>
			</view>


			<view v-for="(item, id) in lists" :key="id">
				<view class="msglist_content" @click="itemcheck(item)">
					<view class="msglist_right">
						<view class="title">
							<image v-if="!item.isRead" src="http://106.14.56.171:15016/images/images/messige.png"
								mode="" />
							<image v-if="item.isRead"
								src="http://106.14.56.171:15016/images/epoxyPouringImages/messige.png" mode="" />
							<!-- 标题 -->
							<text class="title_text">{{item.title}}</text>
						</view>

						<!-- 内容 -->
						<view class="content">
							<text>{{item.content}}</text>
						</view>

						<view class="neirong">
							<text
								class="right">{{item.pushTime?item.pushTime.replace(/-/g, '/').replace('T',' ').slice(0,16):''}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无公告 -->
			<view class="msglist_content announceMents" v-if="lists.length==0">
				<view class="">
					<image src="http://106.14.56.171:15016/images/blank/blank.png" mode="" />
					<text>暂无公告…</text>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	import {
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				showSelect: false,
				allSel: false,
				messageContent: '',
				allchecked: false,
				// 公告列表的data
				announcementData: {
					searchValue: "",
					pageNo: 1,
					pageSize: 10,
					searchBeginTime: "",
					searchEndTime: "",
					sortField: "",
					sortOrder: "",
					descStr: ""
				},
				limitLoad: false, // 防止重复加载
				// 循环的公告列表
				lists: []
			}
		},
		onShow: function(options) {
			this.announcementData.pageNo = 1;
			this.announmentData();
		},
		// 下拉刷新 （刷新完以后返回第一条数据）
		onPullDownRefresh() {
			console.log('refresh');
			this.announmentData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 触底加载消息列表
		onReachBottom() {
			this.messageData.pageNo += 1;
			this.fetchmessageList(1); //触底加载消息列表
		},
		methods: {
			// 获取公告列表
			announmentData: debounce(function(a) {
				var data = {
					...this.announcementData
				}
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				this.$http.post('api/Notice/GetNoticeList', data).then(res => {
					// console.log('获取公告列表', res);
					this.limitLoad = false
					uni.hideLoading()
					this.lists = res.items;
				}).catch(err => {
					this.limitLoad = false
					uni.hideLoading()
				})

			}, 300),
			// 点击进入公告页面 并传item 然后单条阅读
			itemcheck(item) {
				console.log('----------需要去登录', item);
				let id = Number(item.id);
				let data = {
					noticeIdList: [id]
				};
				this.$http.post('api/Notice/ReadNotice', data).then(res => {
					if (res == null) {
						uni.navigateTo({
							url: './message_notice_detail?item=' + JSON.stringify(item)
						});
					}
				});
			},
			// 失去焦点搜索消息列表里面的内容
			search: debounce(function(e) {
				// 搜索输入的内容不能为空
				if (this.announcementData.searchValue == '') {
					uni.showToast({
						title: '输入的内容不能为空',
						icon: 'none'
					});
					return;
				}
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					title: '加载中···',
					mask: true
				})
				let data = {
					searchValue: e.value, //搜索
					pageNo: 1,
					pageSize: 10
				};
				this.$http.post('api/Notice/GetNoticeList', data).then(res => {
					// console.log('搜索',res);
					this.limitLoad = false
					uni.hideLoading()
					this.lists = res.items;
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})

			}, 300),
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #FFFFFF;
	}
</style>

<style lang="less" scoped>
	.uni-popup-dialog {
		width: 300px;
		border-radius: 11px;
		background-color: #fff;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 25px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}



	.uni-popup__info {
		color: #909399;
	}

	.car-bottom-btn {
		position: fixed;
		width: 100%;
		height: 7.5vh;
		background: #FFFFFF;
		left: 0;
		bottom: 0;
		z-index: 6;
		border-top: solid 3rpx #ccc;
		display: flex;

		.allcheck {
			width: 30%;
			height: 100%;
			align-items: center;
			display: flex;
		}

		.btns {
			display: flex;
			height: 100%;
			width: 70%;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			uni-button:after {
				border: 2px solid rgba(181, 181, 181, 1);
				border-radius: 80rpx;
			}

			button {
				padding-left: 0rpx;
				padding-right: 0rpx;
				margin: 0rpx;
				margin-right: 3%;
				font-size: 25rpx;
				background-color: #fff;
				height: 60rpx;
				line-height: 60rpx;
				width: 25%;
			}
		}

	}



	.msglist_content {
		display: flex;
		width: 100%;


		.msglist_left {
			width: 10%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-around;
			// background-color: aqua;

			.icon_viewleft {
				width: 23%;
			}

			.icon_view {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: solid 3rpx #ccc;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 45rpx;

				}
			}
		}


		.msglist_right {
			width: 95%;
			padding: 0 0 20rpx 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			border-bottom: 2rpx solid #EFEFEF;
			// background-color: aqua;


			.content {
				width: 90%;
				font-size: 23rpx;
				overflow: hidden;
				height: 40rpx;
				-webkit-line-clamp: 1; //显示几行
				text-overflow: ellipsis; //超出部分显示省略号
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向
				// background-color: red;
				margin-left: 38rpx;

			}

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 30rpx;
				// background-color: red;

				>image {
					margin-left: 40rpx;
					width: 45rpx;
					height: 45rpx;
				}
			}

			view {
				width: 100%;

				.right {
					float: right;
					margin-right: 5%;
					margin-top: 10rpx;
					font-size: 22rpx;
				}

				.title_text {
					font-size: 26rpx;
					font-weight: 700;
					margin-left: 20rpx;
				}

				font-size: 26rpx;
				margin-top: 20rpx;
				line-height: 40rpx;
			}

			.neirong {
				margin: 0;
				line-height: 20rpx;
				// background-color: aqua;
			}

		}
	}
	.announceMents{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		
		>view {
			margin-top: 50%;
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;
		
			>image {
				width: 300rpx;
				height: 300rpx;
		
			}
		
		}
		
	}

	.user-insert-line {
		width: 80%;
		margin-top: 25rpx;
		margin-left: 14%;
		border-bottom: solid 3rpx #DFDFDF;

	}

	.search-w {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 999999;

		.announcement {
			width: 100%;
		}
	}

	/deep/ .uni-searchbar__box {
		border: 1px solid #EFEFEF;
	}
</style>
